<template>
  <list-layout :categories="categories" @changed="categoryChanged" channel="search">
    <template slot="top">
      <div class="keywords-filter column full-width justify-center items-center">
        <q-input
          dense
          :placeholder="$t('请输入关键字搜索')"
          borderless
          rounded
          outlined
          v-model="kw"
          @keydown.enter="refreshData({ ...currentCategory, kw })"
          class="search-input q-mt-xl">
          <template v-slot:append>
            <q-icon
              class="search-icon full-height"
              name="search"
              @click="refreshData({ ...currentCategory, kw })"/>
          </template>
        </q-input>

        <div class="result-summary q-mb-xl q-mt-md">
          {{$t('为您找到相关结果')}}
          <span class="text-bold q-mx-xs number-font">{{data.total}}</span>
          {{$t('个')}}
        </div>
      </div>
    </template>
    <div class="list-top-text">
      {{$t((currentCategory && currentCategory.type && typeText[currentCategory.type]) || '全部结果')}}

      <filter-options ref="filterOptions" class="filter-options" :hasKw="false" :bottomKw="false"
        :opts="filterOptions"
        :showSelected="false"
        :maxLines="3"
        @search="filter({query: $event})"></filter-options>
    </div>
    <list-item
      v-for="(item,index) in data.docs" :key="index"
      :tags="[$t(typeText[item.type]), item.领域]"
      :date="item.type === 'policy' ? item.date : ''"
      :title="item.title"
      :content="item.content"
      :label="item.label"
      :img="item.图片 && item.图片.id"
      :roundImg="item.type === 'talent'"
      :url="`/${item.type}/${item.id}`"></list-item>

    <div
      v-if="data && data.total === 0"
      class="no-data-label">
      <div class="absolute-center">
        {{$t('暂无数据')}}
      </div>
    </div>

    <pagination v-if="data && data.total" :data="data" @changed="pageChanged"></pagination>
  </list-layout>
</template>

<script>
import mixins from 'eis-admin-mixins';
import { RefreshOnLocaleChange } from '../../components/mixins/locale';
import listLayout from '../../components/listLayout.vue';
import listItem from '../../components/listItem.vue';
import pagination from '../../components/pagination.vue';
import FilterOptions from '../../components/filterOptions.vue';

export default {
  name: 'SiteSearch',
  mixins: [mixins.ObjectDataMixin, RefreshOnLocaleChange],
  components: {
    listItem,
    listLayout,
    pagination,
    FilterOptions,
  },
  data() {
    return {
      kw: '',
      typeText: {
        standard: '标准知识库',
        dataset: '数据资源库',
        tools: '测试工具库',
        talent: '高级人才库',
        stdorg: '标准化组织',
      },
      filters: {},
      filterOptions: [
      ],
      categories: [
        {
          text: '全部',
          filter: {},
        },
        {
          text: '标准知识库',
          filter: {
            type: 'standard',
          },
        },
        {
          text: '数据资源库',
          filter: {
            type: 'dataset',
          },
        },
        {
          text: '测试工具库',
          filter: {
            type: 'tools',
          },
        },
        {
          text: '高级人才库',
          filter: {
            type: 'talent',
          },
        },
        {
          text: '标准化组织',
          filter: {
            type: 'stdorg',
          },
        },
      ],
      currentCategory: '',
    };
  },
  created() {
    if (this.Bus && this.Bus.$store && this.Bus.$store.state
      && this.Bus.$store.state.portal && this.Bus.$store.state.portal.searchKw) {
      this.kw = this.Bus.$store.state.portal.searchKw;

      this.refreshData({ kw: this.kw });
    }

    this.Bus.$store.commit('portal/SET_KW', '');
  },
  methods: {
    categoryChanged(f) {
      this.kw = '';
      this.currentCategory = f;

      this.refreshData(f);

      this.filters = {};
      this.$refs.filterOptions.clearFilters();
    },
    pageChanged(p) {
      let filter = {};

      if (this.currentCategory) {
        filter = { ...this.currentCategory };
      }

      this.refreshData({ ...this.filters, ...filter, page: p });
    },
    filter(filters) {
      const { query } = filters;

      this.filters = query || {};
      let filter = {};

      if (this.currentCategory) {
        filter = { ...this.currentCategory };
      }

      this.refreshData({ ...this.filters, ...filter });
    },
  },
};
</script>

<style lang="scss" scoped>
.keywords-filter {
  .search-input {
    width: 600px;
  }

  .result-summary {
    color: #67767f;
  }

  .search-icon {
    position: absolute;
    width: 70px;
    right: 0;
    color: white;
    background: #265fb3;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    cursor: pointer;
  }
}

.filter-options {
  font-size: 14px;
}
</style>
